<template>
  <div>
    
    <n-grid :x-gap="10" :y-gap="5" :cols="4">
      <n-grid-item>
        <n-input v-model:value="pname" type="text" placeholder="请输入商品名称" size="medium" clearable></n-input>
      </n-grid-item>
      <n-grid-item>
        <n-button type="success" size="medium" @click="handleSearch">
          查询
        </n-button>
      </n-grid-item>
    </n-grid>
    <n-config-provider>
    <n-data-table
      :columns="columns"
      :data="prodList"
      :pagination="pagination"
      :bordered="false"
      class="product-table"
    />
  </n-config-provider>
  </div>
</template>

<script setup>
import { useMessage,NButton, NImage, NTag, useDialog } from 'naive-ui';
import { productDelApi, productGetApi, productSearchApi } from '../../api/product';
import { ref,h } from 'vue';
import { useRouter } from 'vue-router';
import { useDebounceFn } from '@vueuse/core';
import{ usePermission }from '../../hooks/permission.js'
const prodList = ref([]);

productGetApi().then(res=>{
  console.log(res);
  prodList.value = res.data.data
})

//表格配置
function createColumns({
  edit,
  del
}) {
  return [
    {
      title: "商品ID",
      key: "_id"
    },
    {
      title: "商品名称",
      key: "name"
    },
    {
      title: "主类目",
      key: "fnjiType",
      render(row){
        let type = row.fnjiType==2?'success':'info'
        let title = row.fnjiType==2?'家居':'家具'
        return h(NTag,{type},{default:()=>title})
      }
    },
    {
      title: "子类目",
      key: "category"
    },
    {
      title: "封面图",
      key: "picLeft",
      render(row){
        let src = `https://omsv2-static.fnji.com/${row.picLeft}`
        // return h('img',{src,class:'poster'})
        return h(NImage,{src,width:"50"})
      }
    },
    {
      title: "操作",
      key: "actions",
      render(row) { //自定义渲染表格内容的函数
        const btns = [
          {title:'编辑',type:'info',fuc:()=>{edit(row)},disabled:false},
          {title:'删除',type:'error',fuc:()=>{del(row)},disabled:!canUse},
        ]
        const btnsNode = btns.map((item) => {
          return h(
            NButton,
            {
              type: item.type,
              size:'small',
              onClick:item.fuc,
              disabled:item.disabled
            },
            {default: () => item.title}
          )
        })
        return btnsNode
      }
    }
  ];
}

const message = useMessage();
const dialog = useDialog()
const router = useRouter()
const columns=createColumns({
  edit(row) {
    router.push({
      path:'/product/edit',
      query:row
    })
  },
  del(row){
    // console.log('删除',row);
    dialog.warning({
      title: '警告，删除后无法找回',
      content: `你确定要删除《${row.name}》商品吗？`,
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        let res = await productDelApi(row._id) //更新数据库
        if(res.data.code==1){
          let list = prodList.value.filter(item=>item._id!=row._id) //更新本地
          prodList.value = list
        }
      }
    })
    
  }
})
const pagination = ref(true)

//查询
const pname = ref('')
const handleSearch = async ()=>{
  let res = await productSearchApi({pname:pname.value})
  prodList.value = res.data.data
}

// // //根据用户权限permission
// const usePermission = (permit)=>{
//   // permit = ['super','admin','normal']
//   const account = useAccount()
//   const role = account.permitData.role  //当前已登录用户的角色代号:super/admin/normal
//   let bool = permit.includes(role)
//   return {
//     canUse:bool
//   }
// }
const{canUse}=usePermission(['C001'])
// 防抖搜索函数
const debunceInput = useDebounceFn(()=>{
  console.log('输入完毕');
},1000)
</script>

<style lang="scss" scoped>
/* 深度选择器 */
.product-table :deep(.poster){
  height: 50px;
}
</style>